﻿@page
@{ Layout = "_LayoutHome"; }

@section Styles{
  <style>
        .el-upload, .el-upload-dragger {
            width: 150px;
        }

        .el-button-group .el-dropdown {
            float: left;
            margin-top: -2.5px;
            margin-right: -1px;
        }

        .avatar {
            width: 158px;
            height: 158px;
            display: block;
        }
  </style>
}

<el-card>
    <el-scrollbar class="scrollbar" :style="{ height: ($(window).height()-63) + 'px' }">
        <el-card>
            <div style="margin-right:18px;">
                <el-form v-on:submit.native.prevent ref="form" :model="form" status-icon label-width="140px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.userName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="displayName" :rules="[{ required: true, message: '请输入姓名' }]">
                        <el-input v-model="form.displayName"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="mobile" :rules="[{ validator: utils.validateMobile, message: '字段必须是有效的手机号码' }]">
                        <el-input v-model="form.mobile" placeholder="请输入手机号码"></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱" prop="email" :rules="[
    { type: 'email', message: '请输入有效的电子邮箱' }
  ]">
                        <el-input v-model="form.email" placeholder="请输入电子邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="头像">
                        <el-upload :action="uploadUrl"
                                   :show-file-list="false"
                                   :headers="{Authorization: 'Bearer ' + $token}"
                                   list-type="picture-card"
                                   :before-upload="uploadBefore"
                                   :on-progress="uploadProgress"
                                   :on-success="uploadSuccess"
                                   :on-error="uploadError"
                                   :on-remove="uploadRemove"
                                   :multiple="false">
                            <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar">
                            <i v-else class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="背景">
                        <el-upload :action="uploadUrl"
                                   :show-file-list="false"
                                   :headers="{Authorization: 'Bearer ' + $token}"
                                   list-type="picture-card"
                                   :before-upload="uploadBgBefore"
                                   :on-progress="uploadBgProgress"
                                   :on-success="uploadBgSuccess"
                                   :on-error="uploadBgError"
                                   :on-remove="uploadBgRemove"
                                   :multiple="false">
                            <img v-if="form.avatarbgUrl" :src="form.avatarbgUrl" class="avatar">
                            <i v-else class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-divider></el-divider>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-check" type="primary" v-on:click="btnSubmitClick">保 存</el-button>
                        <el-button type="primary" plain icon="el-icon-back" v-on:click="btnTopMenuClick('index')">返 回</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </el-scrollbar>
</el-card>
@section Scripts{
<script src="/sitefiles/assets/js/home/profile.js" type="text/javascript"></script> }